<template>
  <li>
    <label>
        <input type="checkbox"  :checked="todo.done" @change="handleChecked(todo.id)"/>
          <span v-show="!todo.isEdit">{{todo.title}}</span>
          <input
              type="text"
              v-show="todo.isEdit"
              :value="todo.title"
              @blur="handleBlur(todo,$event)"
              ref="inputTitle"
          >
    </label>
    <button class="btn btn-danger"  @click="handledelete(todo.id)">删除</button>
    <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
  </li>
</template>

<script>
import pubsub from 'pubsub-js'
import 'animate.css'
export default {
  name: "MyItem",
  //声明接收todo对象
  props:['todo'],
  methods:{
    handleChecked(id){
      //通知app组件将对应的todo的done值置反
      this.$bus.$emit('checkedtodo',id)
     // this.checkedtodo(id)
    },
    handledelete(id){
      console.log("item",id)
      if(confirm("确定删除吗？")) {
        //通知app组件将对应的todo的删除
        pubsub.publish('deletetodo',id)
       // this.$bus.$emit('deletetodo',id)
        //this.deletetodo(id)
      }
    },
    //编辑
    handleEdit(todo){

       /*
       if(todo.hasOwnProperty.('isEdit')){
          这里直接调用hasOwnProperty  会有问题 由于ESLint升级，在项目中直接使用xxx.hasOwnProperty()可能会导致
          error Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-buil
          错误提示意思是：不要从目标对象上访问 Object 原型方法。在ECMAScript 5.1中，新增了 Object.create，它支持使用指定的 [[Prototype]] 创建对象。
          我们可以通过使用call()方法来调用不属于本身this对象的方法。
      */
        if(todo.hasOwnProperty.call('isEdit')){
              todo.isEdit=true
        }else{
              this.$set(todo,'isEdit',true)
         }
        this.$nextTick(function (){
          this.$refs.inputTitle.focus()
        })
    },
    //失去焦点回调（真正值执行修改逻辑）
    handleBlur(todo,e){
      todo.isEdit = false
      console.log('updatetodo',todo.id,e.target.value)
      if(!e.target.value.trim())return alert('输入不能为空！')
      this.$bus.$emit('updatetodo',todo.id,e.target.value)
    }
  },
  mounted(){
    console.log(this.todo)

  }
}
</script>

<style scoped>
  li{
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border: 1px solid #f8dede;
  }
  li label{
    float: left;
    cursor: pointer;
  }
  li label li input{
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  li button{
    float: right;
    display: none;
    margin-top: 3px;
  }
  li:before{
    contain: initial;
  }
  li:last-child{
    border-bottom: none;
  }
  li:hover{
    background-color: #f6e5e5;
  }
  li:hover button{
    display: block;
  }
</style>